<template>
    <el-tree style="max-width: 300px" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
  </template>
    
  <script  setup>
  import { List } from 'echarts';
  import { toRefs } from 'vue';
  const emit = defineEmits(['getTreeData'])
  const handleNodeClick = (data) => {
    console.log("data--->", data)
    emit('getTreeData', data);
  }
  
  const props = defineProps({
    data: {
      type: List,
    },
  })
  
  const { data } = toRefs(props);
  
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  
  //  懒加载
  // const loadNode = async (node, resolve) => {
  //   if (node.level === 0) {
  //     return resolve([{ name: 'region' }])
  //   }
  //   if (node.level > 1) return resolve([])
  
  //   setTimeout(() => {
  //     const data = [
  //       {
  //         name: 'leaf',
  //         leaf: true,
  //       },
  //       {
  //         name: 'zone',
  //       },
  //     ]
  
  //     resolve(data)
  //   }, 500)
  // }
  </script>
    